<template>
	<view class="transfer u-skeleton">
		<u-navbar title="转赠" :background="{'backgroundColor':'#fff'}" :borderBottom="false" class="u-skeleton-rect"></u-navbar>
		<view class="new-top-img">
			<image :src="$util.img('/static/img/transfer/transfer-bg.png')" mode=""></image>
		</view>
		<view class="new-info">
			<view class="slecttype">
				<view class="s-left">请选择角色</view>
				<view class="s-right" @click="show = true">
					<view class="name">{{list[current]}}</view>
					<u-icon name="arrow-down" size='26' color='rgba(0,0,0,.4)' v-if="true"></u-icon>
					<u-icon name="arrow-up" size='26' color='rgba(0,0,0,.4)' v-else></u-icon>
				</view>
			</view>
			<view class="new-info-top">
				<text>接收人</text>
				<view class="new-info-input">
					<input type="text" placeholder="请输入对方邀请码" v-model="code"/>
				</view>
			</view>
			<view class="new-info-top mt30px">
				<text>赠送数量</text>
				<view class="new-info-input">
					<input type="text" placeholder="请输入对方的数量" v-model="num"/>
				</view>
			</view>
			<view class="new-info-have">
				<text>我拥有的潮卡：{{toast_num}}</text>
			</view>
		</view>
		<view class="new-btns">
			<u-button class="primary" @click="setinfo" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">确认赠送</u-button>
		</view>
		<u-picker v-model="show" mode="selector" :range="list" @confirm='confirm'></u-picker>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				//选择类型是否显示
				show:false,
				// 首次进入加载
				loding: true,
				//卡片数量
				num:'',
				// 接收人id
				code:'',
				//卡片id
				id:0,
				// 要选的类型
				list:['','店长','普通会员'],
				//选中的类型
				current:0,
				//获取的数量
				toast_num:0
			}
		},
		onLoad(option) {
			if(option){
				this.id = option.card_id;
				this.loding = false;
			}
		},
		onShow() {
			this.getinfo();
		},
		methods:{
			//获得类型
			confirm(e){
				this.current = e[0]
			},
			getinfo(){
				this.$http.asyncSendrequest({
					url:'/profile/storeCard',
					success:res=>{
						this.toast_num = 0;
						res.data.forEach(item=>{
							this.toast_num += item.no_use;
						})
					}
				})
			},
			setinfo(){
				if(!this.current){
					uni.showToast({
						title:"请选择赠送对象",
						icon:'none'
					})
					return false;
				}
				if(this.num.indexOf('-') != -1){
					uni.showToast({
						title:"赠送数量不能为负数",
						icon:'none'
					})
					return false;
				}
				this.$http.asyncSendrequest({
					url:'/profile/transferCard',
					data:{
						num:this.num,
						code:this.code,
						card_id:this.id,
						type:this.current
					},
					success:res=>{
						this.$util.taost({
							title:res.msg,
							callback:v=>{
								this.getinfo();
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.new-top-img{
		width: 100%;
		image{
			width: 100%;
			height: 360rpx;
		}
	}
	.new-info{
		position: relative;
		margin: 0 30rpx;
		margin-top: -60rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.mt30px{
			margin-top: 35rpx;
		}
		.slecttype{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			
			.s-left{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.s-right{
				width: 250rpx;
				height: 60rpx;
				border: 1rpx solid rgba(0,0,0,.2);
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				display: flex;
				align-items: center;
				.name{
					width: 108rpx;
					font-size: 26rpx;
					margin-right: 40rpx;
					text-align: center;
				}
			}
		}
		.new-info-top{
			text{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.new-info-input{
				margin-top: 30rpx;
				border: 1rpx solid #000;
				border-radius: 10rpx;
				input{
					padding: 20rpx 0;
					padding-left: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
		.new-info-have{
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			text{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}
		}
	}
	.new-btns{
		margin: 0 auto;
		margin-top: 45rpx;
		width: 80%;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 10rpx;
		.primary {
			width: 100%;
			height: 96rpx;
			background: #292929;
			border-radius: 10rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>